<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/blog/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/blog/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/blog/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/blog/images/logo.svg" color="#222">

<link rel="stylesheet" href="/blog/css/main.css">


<link rel="stylesheet" href="/blog/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"dttx123.gitee.io","root":"/blog/","scheme":"Gemini","version":"8.0.0-rc.2","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="Vue基本概念 vue介绍 vue 中文网 Vue.js 是什么 Vue (读音 &#x2F;vjuː&#x2F;，类似于 view) 是一套用于构建用户界面的渐进式框架。   渐进式的概念渐进式：逐渐增强，可以在项目中使用vue的一部分功能，也可以使用vue的全家桶来管理整个项目。  框架的概念 我们所说的前端框架与库的区别？  Library  代表：jQuery  库，本质上是一些函数的集合。每次调用函数，实现">
<meta property="og:type" content="article">
<meta property="og:title" content="vue 基础">
<meta property="og:url" content="http://dttx123.gitee.io/2018/08/22/vue/vue%E5%9F%BA%E7%A1%80/index.html">
<meta property="og:site_name" content="Starry Night">
<meta property="og:description" content="Vue基本概念 vue介绍 vue 中文网 Vue.js 是什么 Vue (读音 &#x2F;vjuː&#x2F;，类似于 view) 是一套用于构建用户界面的渐进式框架。   渐进式的概念渐进式：逐渐增强，可以在项目中使用vue的一部分功能，也可以使用vue的全家桶来管理整个项目。  框架的概念 我们所说的前端框架与库的区别？  Library  代表：jQuery  库，本质上是一些函数的集合。每次调用函数，实现">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/08/22/vue/vue%E5%9F%BA%E7%A1%80/VUE-logo.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/08/22/vue/vue%E5%9F%BA%E7%A1%80/%E6%B8%90%E8%BF%9B%E5%BC%8F.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/08/22/vue/vue%E5%9F%BA%E7%A1%80/MVVM.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/08/22/vue/vue%E5%9F%BA%E7%A1%80/%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A.png">
<meta property="article:published_time" content="2018-08-21T16:00:00.000Z">
<meta property="article:modified_time" content="2020-05-13T13:23:21.865Z">
<meta property="article:author" content="大春哥">
<meta property="article:tag" content="vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://dttx123.gitee.io/blog/2018/08/22/vue/vue%E5%9F%BA%E7%A1%80/VUE-logo.png">

<link rel="canonical" href="http://dttx123.gitee.io/2018/08/22/vue/vue%E5%9F%BA%E7%A1%80/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>vue 基础 | Starry Night</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
        <span class="toggle-line toggle-line-first"></span>
        <span class="toggle-line toggle-line-middle"></span>
        <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/blog/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">Starry Night</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">这就朕为你打下的江山</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/blog/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/blog/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/blog/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/blog/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/blog/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://dttx123.gitee.io/2018/08/22/vue/vue%E5%9F%BA%E7%A1%80/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/blog/images/avatar.jpg">
      <meta itemprop="name" content="大春哥">
      <meta itemprop="description" content="IT">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Starry Night">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          vue 基础
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2018-08-22 00:00:00" itemprop="dateCreated datePublished" datetime="2018-08-22T00:00:00+08:00">2018-08-22</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-05-13 21:23:21" itemprop="dateModified" datetime="2020-05-13T21:23:21+08:00">2020-05-13</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/vue/" itemprop="url" rel="index"><span itemprop="name">vue</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="Vue基本概念"><a href="#Vue基本概念" class="headerlink" title="Vue基本概念"></a>Vue基本概念</h1><p><img src="/blog/2018/08/22/vue/vue%E5%9F%BA%E7%A1%80/VUE-logo.png" alt="Vue"></p>
<h2 id="vue介绍"><a href="#vue介绍" class="headerlink" title="vue介绍"></a>vue介绍</h2><ul>
<li><a href="https://cn.vuejs.org/" target="_blank" rel="noopener">vue 中文网</a></li>
<li><a href="https://cn.vuejs.org/v2/guide/index.html#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88" target="_blank" rel="noopener">Vue.js 是什么</a></li>
<li>Vue (读音 /vjuː/，类似于 <strong>view</strong>) 是一套用于构建用户界面的<strong>渐进式框架</strong>。 </li>
</ul>
<h3 id="渐进式的概念"><a href="#渐进式的概念" class="headerlink" title="渐进式的概念"></a>渐进式的概念</h3><p>渐进式：逐渐增强，可以在项目中使用vue的一部分功能，也可以使用vue的全家桶来管理整个项目。</p>
<p><img src="/blog/2018/08/22/vue/vue%E5%9F%BA%E7%A1%80/%E6%B8%90%E8%BF%9B%E5%BC%8F.png" alt></p>
<h3 id="框架的概念"><a href="#框架的概念" class="headerlink" title="框架的概念"></a>框架的概念</h3><ul>
<li><a href="https://zhuanlan.zhihu.com/p/26078359?group_id=830801800406917120" target="_blank" rel="noopener">我们所说的前端框架与库的区别？</a></li>
</ul>
<p><strong>Library</strong></p>
<ul>
<li><p>代表：jQuery</p>
</li>
<li><p>库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能</p>
</li>
</ul>
<ul>
<li>使用库的时候，把库当成工具使用，需要自己控制代码的执行逻辑。</li>
</ul>
<p><strong>Framework</strong></p>
<ul>
<li><p>代表：vue、angular、react</p>
</li>
<li><p>框架，是一套完整的解决方案</p>
</li>
</ul>
<ul>
<li>使用框架的时候，框架实现了大部分的功能，我们只需要按照框架的规则写代码</li>
</ul>
<p><strong>库和框架的区别</strong></p>
<ul>
<li>使用库的时候，很自由，只要调用库提供的各种各样的方法就行，也可以不用其他的一些方法</li>
<li>使用框架的时候，需要按照框架的规则写代码，限制会非常多，但同时框架的功能也很强大，可以极大的提升开发的效率。</li>
</ul>
<h2 id="MVVM的概念"><a href="#MVVM的概念" class="headerlink" title="MVVM的概念"></a>MVVM的概念</h2><ul>
<li>MVVM，一种软件架构模式，决定了写代码的方式。<ul>
<li>M：model数据模型(ajax获取到的数据)    </li>
<li>V：view视图（页面）</li>
<li>VM：ViewModel 视图模型</li>
</ul>
</li>
</ul>
<ul>
<li>MVVM通过<code>数据双向绑定</code>让数据自动地双向同步  <strong>不在需要操作DOM</strong><ul>
<li>V（修改视图） -&gt; M（数据自动同步）</li>
<li>M（修改数据） -&gt; V（视图自动同步）</li>
</ul>
</li>
</ul>
<p><img src="/blog/2018/08/22/vue/vue%E5%9F%BA%E7%A1%80/MVVM.png" alt></p>
<h3 id="Vue中的MVVM"><a href="#Vue中的MVVM" class="headerlink" title="Vue中的MVVM"></a>Vue中的MVVM</h3><p>虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例</p>
<p>注意：</p>
<p><strong>1. 在vue中，不推荐直接手动操作DOM！！！</strong> </p>
<p><strong>2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！</strong></p>
<p><img src="/blog/2018/08/22/vue/vue%E5%9F%BA%E7%A1%80/%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A.png" alt></p>
<h1 id="vue初体验"><a href="#vue初体验" class="headerlink" title="vue初体验"></a>vue初体验</h1><h2 id="基本使用步骤"><a href="#基本使用步骤" class="headerlink" title="基本使用步骤"></a>基本使用步骤</h2><ul>
<li>安装：<code>npm install vue</code> </li>
<li>引入<code>vue.js</code>文件</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>创建Vue实例，指定el和data参数</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建vue实例，需要指定el和data属性</span></span><br><span class="line"><span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="comment">// 指定vue的模版，值是一个选择器</span></span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    <span class="comment">// 提供了vue中使用的数据</span></span><br><span class="line">    data: &#123;</span><br><span class="line">        msg: <span class="string">'hello vue'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ul>
<li>在模版中显示数据</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    // 通过&#123;&#123;&#125;&#125;可以显示data中的数据</span><br><span class="line">    &#123;&#123;msg&#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>注意事项：</strong></p>
<ul>
<li>在开发阶段，一定要引入未压缩版的vue.js，因为压缩版的vue.js去除了警告信息和错误提示</li>
<li>el不能是<code>html</code>或者<code>body</code></li>
</ul>
<h2 id="插值表达式"><a href="#插值表达式" class="headerlink" title="插值表达式"></a>插值表达式</h2><!-- 插值表达式："&#123;&#123; &#125;&#125;"，也叫Mustache语法，小胡子语法，因为长得像胡子 -->
<!-- - 解释：使用"&#123;&#123; &#125;&#125;"（插值表达式）从`data`中获取数据，并展示在模板中 -->
<!-- - 说明："&#123;&#123; &#125;&#125;"中只能出现JavaScript表达式 -->

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>Hello, &#123;&#123; msg &#125;&#125;.<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; isOk ? 'yes': 'no' &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; 1 + 2 &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>注意点：</strong></p>
<ul>
<li>插值表达式中不能出现语句，比如if / else / for等</li>
<li>插值表达式中访问的数据要在data中存在。</li>
<li>插值表达式不能在属性中使用，只能在标签的内容中使用。</li>
</ul>
<h1 id="vue指令"><a href="#vue指令" class="headerlink" title="vue指令"></a>vue指令</h1><ul>
<li>解释：指令 (Directives) 是带有 <code>v-</code> 前缀的特殊属性，可以在html标签中使用，可以看成特殊的html属性</li>
<li>作用：指令提供了一些特殊的功能，当指向绑定到标签上时，可以给标签增加一些特殊的行为</li>
</ul>
<h2 id="v-bind指令"><a href="#v-bind指令" class="headerlink" title="v-bind指令"></a>v-bind指令</h2><ul>
<li>描述：插值表达式不能用在html的属性上，如果想要动态的设置html元素的属性，需要使用v-bind指令</li>
<li>作用：动态的设置html的属性</li>
<li>语法：<code>v-bind:title=&quot;msg&quot;</code></li>
<li>简写：<code>:title=&quot;msg&quot;</code></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 完整语法 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">v-bind:href</span>=<span class="string">"url"</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 缩写 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">:href</span>=<span class="string">"url"</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="v-model指令"><a href="#v-model指令" class="headerlink" title="v-model指令"></a>v-model指令</h2><p>v-model: <a href="https://cn.vuejs.org/v2/guide/forms.html" target="_blank" rel="noopener">https://cn.vuejs.org/v2/guide/forms.html</a></p>
<ul>
<li>作用：在表单元素上创建双向数据绑定</li>
<li>说明：监听用户的输入事件以更新数据</li>
<li>思考：如何在JS代码中获取到文本框的值？？？</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"message"</span> <span class="attr">placeholder</span>=<span class="string">"edit me"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Message is: &#123;&#123; message &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="双向数据绑定原理"><a href="#双向数据绑定原理" class="headerlink" title="双向数据绑定原理"></a>双向数据绑定原理</h3><ul>
<li>双向数据绑定：将DOM与Vue实例的data数据绑定到一起，彼此之间相互影响<ul>
<li>数据的改变会引起DOM的改变</li>
<li>DOM的改变也会引起数据的变化</li>
</ul>
</li>
<li>原理：数据劫持，<code>Object.defineProperty</code>中的<code>get</code>和<code>set</code>方法<ul>
<li><code>getter</code>和<code>setter</code>：访问器</li>
<li>作用：指定<code>读取或设置</code>对象属性值的时候，执行的操作</li>
</ul>
</li>
<li>注意：<code>Object.defineProperty</code>方法是ES5中提供的，IE8浏览器不支持这个方法。因此，Vue支持IE8及其以下版本浏览器</li>
<li><a href="https://cn.vuejs.org/v2/guide/reactivity.html" target="_blank" rel="noopener">Vue - 深入响应式原理</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" target="_blank" rel="noopener">MDN - Object.defineProperty()</a></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">  语法</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;&#125;</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(obj, <span class="string">'msg'</span>, &#123;</span><br><span class="line">  <span class="comment">// 设置 obj.msg 执行的操作</span></span><br><span class="line">  <span class="keyword">set</span>: function () &#123;&#125;,</span><br><span class="line">  <span class="comment">// 读取 obj.msg 执行的操作</span></span><br><span class="line">  <span class="keyword">get</span>: function () &#123;&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="Vue双向绑定的极简实现"><a href="#Vue双向绑定的极简实现" class="headerlink" title="Vue双向绑定的极简实现"></a>Vue双向绑定的极简实现</h3><ul>
<li><a href="https://segmentfault.com/a/1190000006599500" target="_blank" rel="noopener">剖析Vue原理&amp;实现双向绑定MVVM</a></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 示例 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">id</span>=<span class="string">"txt"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"msgBox"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">const</span> txt = <span class="built_in">document</span>.getElementById(<span class="string">'txt'</span>)</span></span><br><span class="line"><span class="javascript"><span class="keyword">const</span> msgBox = <span class="built_in">document</span>.getElementById(<span class="string">'msgBox'</span>)</span></span><br><span class="line"><span class="actionscript"><span class="keyword">const</span> obj = &#123;&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript"><span class="comment">// 给对象obj添加msg属性，并设置setter访问器</span></span></span><br><span class="line"><span class="javascript"><span class="built_in">Object</span>.defineProperty(obj, <span class="string">'msg'</span>, &#123;</span></span><br><span class="line"><span class="actionscript">  <span class="comment">// 设置 obj.msg 执行的操作</span></span></span><br><span class="line"><span class="actionscript">  <span class="keyword">set</span>: <span class="function"><span class="keyword">function</span> <span class="params">(curVal)</span> </span>&#123;</span></span><br><span class="line">    txt.value = curVal</span><br><span class="line">    msgBox.innerText = curVal</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript"><span class="comment">// 监听文本框的改变</span></span></span><br><span class="line"><span class="actionscript">txt.addEventListener(<span class="string">'input'</span>, <span class="function"><span class="keyword">function</span> <span class="params">(event)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">  obj.msg = <span class="keyword">this</span>.value</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>


<h2 id="v-on指令"><a href="#v-on指令" class="headerlink" title="v-on指令"></a>v-on指令</h2><p><a href="https://cn.vuejs.org/v2/guide/events.html" target="_blank" rel="noopener">https://cn.vuejs.org/v2/guide/events.html</a></p>
<ul>
<li>作用：绑定事件</li>
<li>语法：<code>v-on:click=&quot;say&quot;</code> or <code>v-on:click=&quot;say(&#39;参数&#39;, $event)&quot;</code></li>
<li>简写：<code>@click=&quot;say&quot;</code></li>
<li>说明：绑定的事件从<code>methods</code>中获取</li>
<li>案例：跑马灯</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 完整语法 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">v-on:click</span>=<span class="string">"doSomething"</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 缩写 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> @<span class="attr">click</span>=<span class="string">"doSomething"</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="事件修饰符"><a href="#事件修饰符" class="headerlink" title="事件修饰符"></a>事件修饰符</h3><ul>
<li><code>.stop</code>       阻止冒泡，调用 event.stopPropagation()</li>
<li><code>.prevent</code>    阻止默认行为，调用 event.preventDefault()</li>
<li><code>.capture</code>    添加事件侦听器时使用事件<code>捕获</code>模式</li>
<li><code>.self</code>       只当事件在该元素本身（比如不是子元素）触发时，才会触发事件</li>
<li><code>.once</code>       事件只触发一次</li>
</ul>
<h3 id="按键修饰符"><a href="#按键修饰符" class="headerlink" title="按键修饰符"></a>按键修饰符</h3><p>在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 <code>v-on</code> 在监听键盘事件时添加按键修饰符： </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">.enter</span><br><span class="line">.tab</span><br><span class="line">.delete (捕获“删除”和“退格”键)</span><br><span class="line">.esc</span><br><span class="line">.space</span><br><span class="line">.up</span><br><span class="line">.down</span><br><span class="line">.left</span><br><span class="line">.right</span><br></pre></td></tr></table></figure>

<h2 id="v-for"><a href="#v-for" class="headerlink" title="v-for"></a>v-for</h2><ul>
<li><a href="https://cn.vuejs.org/v2/guide/list.html" target="_blank" rel="noopener">列表渲染</a></li>
</ul>
<ul>
<li>作用：基于源数据多次渲染元素或模板块</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 1 基础用法 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"item in items"</span>&gt;</span></span><br><span class="line">  &#123;&#123; item.text &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- item 为当前项，index 为索引 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"(item, index) in list"</span>&gt;</span>&#123;&#123;item&#125;&#125; -- &#123;&#123;index&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- item 为值，key 为键，index 为索引 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"(item, key, index) in obj"</span>&gt;</span>&#123;&#123;item&#125;&#125; -- &#123;&#123;key&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"item in 10"</span>&gt;</span>&#123;&#123;item&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="key属性"><a href="#key属性" class="headerlink" title="key属性"></a>key属性</h3><ul>
<li>推荐：使用 <code>v-for</code> 的时候提供 <code>key</code> 属性，能够提升列表渲染的性能</li>
<li>说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。</li>
<li><a href="https://cn.vuejs.org/v2/guide/list.html#key" target="_blank" rel="noopener">vue key</a></li>
<li><a href="https://www.zhihu.com/question/61064119/answer/183717717" target="_blank" rel="noopener">vue key属性的说明</a></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"item in items"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 内容 --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="v-if-和-v-show"><a href="#v-if-和-v-show" class="headerlink" title="v-if 和 v-show"></a>v-if 和 v-show</h2><ul>
<li><a href="https://cn.vuejs.org/v2/guide/conditional.html" target="_blank" rel="noopener">条件渲染</a></li>
<li><code>v-if</code>：根据表达式的值的真假条件，销毁或重建元素</li>
<li><code>v-show</code>：根据表达式之真假值，切换元素的 display CSS 属性</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-show</span>=<span class="string">"isShow"</span>&gt;</span>这个元素展示出来了吗？？？<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">"isShow"</span>&gt;</span>这个元素，在HTML结构中吗？？？<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="v-else与v-else-if指令"><a href="#v-else与v-else-if指令" class="headerlink" title="v-else与v-else-if指令"></a>v-else与v-else-if指令</h2><p>v-else和v-else-if指令用于指定其他的条件，需要配合v-if使用。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">"isShow"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-else</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>注意：</p>
<p>​    1. v-else必须紧跟在<code>v-if</code>或者<code>v-else-if</code>的后面</p>
<h2 id="v-text指令"><a href="#v-text指令" class="headerlink" title="v-text指令"></a>v-text指令</h2><ul>
<li>解释：更新元素的 <code>textContent</code>。如果要更新部分的 <code>textContent</code> ，需要使用 <code></code> 插值。 </li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-text</span>=<span class="string">"msg"</span>&gt;</span><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="v-html指令"><a href="#v-html指令" class="headerlink" title="v-html指令"></a>v-html指令</h2><ul>
<li>解释：更新DOM对象的 innerHTML,html标签会生效</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-html</span>=<span class="string">"msg"</span>&gt;</span><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 <a href="https://en.wikipedia.org/wiki/Cross-site_scripting" target="_blank" rel="noopener">XSS 攻击</a>。只在可信内容上使用 <code>v-html</code>，</strong>永不<strong>用在用户提交的内容上。</strong> </p>
<h2 id="提升性能：v-pre"><a href="#提升性能：v-pre" class="headerlink" title="提升性能：v-pre"></a>提升性能：v-pre</h2><ul>
<li>说明：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-pre</span>&gt;</span>&#123;&#123; this will not be compiled &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="提升性能：v-once"><a href="#提升性能：v-once" class="headerlink" title="提升性能：v-once"></a>提升性能：v-once</h2><ul>
<li>说明：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-once</span>&gt;</span>This will never change: &#123;&#123;msg&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="样式处理-class和style"><a href="#样式处理-class和style" class="headerlink" title="样式处理-class和style"></a>样式处理-class和style</h2><ul>
<li>使用方式：<code>v-bind:class=&quot;expression&quot;</code> or <code>:class=&quot;expression&quot;</code></li>
<li>表达式的类型：字符串、数组、对象（重点）</li>
<li>语法：</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 1 --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 重点 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:class</span>=<span class="string">"&#123; active: true &#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span> ===&gt;</span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"active"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 2 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"['active', 'text-danger']"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span> ===&gt;</span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"active text-danger"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 3 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:class</span>=<span class="string">"[&#123; active: true &#125;, errorClass]"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span> ===&gt;</span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"active text-danger"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">--- style ---</span><br><span class="line"><span class="comment">&lt;!-- 1 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:style</span>=<span class="string">"&#123; color: activeColor, 'font-size': fontSize + 'px' &#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 2 将多个 样式对象 应用到一个元素上--&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- baseStyles 和 overridingStyles 都是对象 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:style</span>=<span class="string">"[baseStyles, overridingStyles]"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="计算属性"><a href="#计算属性" class="headerlink" title="计算属性"></a>计算属性</h1><blockquote>
<p>计算属性：当计算属性依赖的数据发生改变的时候，计算属性会重新计算一次，如果计算属性依赖的属性没有发生改变，那么计算属性就不会重新计算。</p>
</blockquote>
<h2 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">      el: <span class="string">'#app'</span>,</span><br><span class="line">      data: &#123;</span><br><span class="line">        n1:<span class="string">''</span>,</span><br><span class="line">        n2:<span class="string">''</span></span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">//n3依赖与n1和n2的值，当n1 和 n2发生改变的时候，这个函数就会执行。</span></span><br><span class="line">    	<span class="comment">//返回值就是n3的值</span></span><br><span class="line">      computed: &#123;</span><br><span class="line">        n3()&#123;</span><br><span class="line">          <span class="keyword">return</span> +<span class="keyword">this</span>.n1 + +<span class="keyword">this</span>.n2;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br></pre></td></tr></table></figure>

<p><strong>计算属性是基于它们的依赖项进行缓存的</strong> </p>
<p>如果页面中需要使用多次计算属性的值，只会计算一次，计算属性只有在它的相关依赖发生改变时才会重新求值。 </p>
<p><strong>计算属性不能与data中的属性同名，因为无论是data中的属性还是计算属性，最终都是挂载到vm上的</strong></p>
<h1 id="watch监视数据的变化"><a href="#watch监视数据的变化" class="headerlink" title="watch监视数据的变化"></a>watch监视数据的变化</h1><blockquote>
<p>vue实例中提供了一个watch属性，用于监听vue实例中的属性的变化。</p>
<p>watch对应了一个对象，键是观察的属性，值是对应的回调函数。</p>
</blockquote>
<h2 id="基本使用-1"><a href="#基本使用-1" class="headerlink" title="基本使用"></a>基本使用</h2><ul>
<li>基本使用</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//第一个参数：当前值</span></span><br><span class="line"><span class="comment">//第二个参数：上一次的值</span></span><br><span class="line">username: <span class="function"><span class="keyword">function</span>(<span class="params">curr, old</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>表单校验效果</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// watch: 监视数据的变化</span></span><br><span class="line">watch: &#123;</span><br><span class="line">    <span class="comment">// 监视msg，只要msg属性的值发生改变，function就会执行</span></span><br><span class="line">    <span class="comment">// value: 当前值  oldValue:上一次的值</span></span><br><span class="line">    msg: <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (value.length &gt;=<span class="number">3</span> &amp;&amp; value.length &lt;= <span class="number">6</span>) &#123;</span><br><span class="line">            <span class="keyword">this</span>.tips = <span class="string">'正确'</span></span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">this</span>.tips = <span class="string">'密码格式不正确'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="监视对象"><a href="#监视对象" class="headerlink" title="监视对象"></a>监视对象</h2><blockquote>
<p>监视对象的时候，需要加上<code>deep: true</code></p>
<p>为了发现对象内部值的变化，可以在选项参数中指定 <code>deep: true</code> </p>
</blockquote>
<ul>
<li>如果是一个对象，无法监听到对象内部值的变化</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">  &lt;script&gt;</span><br><span class="line">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">      el: <span class="string">'#app'</span>,</span><br><span class="line">      data: &#123;</span><br><span class="line">        user: &#123;</span><br><span class="line">          name:<span class="string">'zs'</span>,</span><br><span class="line">          age: <span class="number">18</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      watch: &#123;</span><br><span class="line">        user: <span class="function"><span class="keyword">function</span>(<span class="params">curr, old</span>) </span>&#123;</span><br><span class="line">          <span class="built_in">console</span>.log(curr, old);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  &lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;input type="text" v-model="user.name"&gt;</span></span><br><span class="line"><span class="regexp">&lt;input type="text" v-model="user.age"&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>需要加上deep</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">watch: &#123;</span><br><span class="line">    user: &#123;</span><br><span class="line">        deep: <span class="literal">true</span>,</span><br><span class="line">            handler: <span class="function"><span class="keyword">function</span>(<span class="params">curr, old</span>) </span>&#123;</span><br><span class="line">                <span class="comment">//注意：如果监听的是对象，新值与旧值都是相同的，因为指向了同一个对象。</span></span><br><span class="line">                <span class="comment">//https://cn.vuejs.org/v2/api/#vm-watch</span></span><br><span class="line">                <span class="built_in">console</span>.log(curr.age, curr.name);</span><br><span class="line">            &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><strong>immediate</strong> 属性,立马进行监听</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">watch: &#123;</span><br><span class="line">    user: &#123;</span><br><span class="line">        deep: <span class="literal">true</span>,</span><br><span class="line">        immediate:<span class="literal">true</span>,</span><br><span class="line">        handler: <span class="function"><span class="keyword">function</span>(<span class="params">curr, old</span>) </span>&#123;</span><br><span class="line">          <span class="built_in">console</span>.log(curr.age, curr.name);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h1 id="生命周期与钩子函数"><a href="#生命周期与钩子函数" class="headerlink" title="生命周期与钩子函数"></a>生命周期与钩子函数</h1><h2 id="生命周期介绍"><a href="#生命周期介绍" class="headerlink" title="生命周期介绍"></a>生命周期介绍</h2><ul>
<li><a href="https://cn.vuejs.org/v2/api/#选项-生命周期钩子" target="_blank" rel="noopener">vue生命周期钩子函数</a></li>
<li>简单说：<strong>一个实例从开始到最后消亡所经历的各种状态，就是一个实例的生命周期</strong></li>
</ul>
<p>实例生命周期函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！</p>
<ul>
<li>生命周期的钩子函数：框架提供的函数，能够让开发人员的代码，参与到组件的生命周期中。也就是说，通过钩子函数，就可以控制组件的行为</li>
<li>注意：vue再执行过程中会自动调用<code>生命周期钩子函数</code>，我们只需要提供这些钩子函数即可</li>
<li>注意：钩子函数的名称都是固定的！！！</li>
</ul>
<h2 id="钩子函数-beforeCreate"><a href="#钩子函数-beforeCreate" class="headerlink" title="钩子函数 - beforeCreate()"></a>钩子函数 - beforeCreate()</h2><ul>
<li>说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用</li>
<li>注意：此时，无法获取 data中的数据、methods中的方法</li>
</ul>
<h2 id="钩子函数-created"><a href="#钩子函数-created" class="headerlink" title="钩子函数 - created()"></a>钩子函数 - <strong>created()</strong></h2><ul>
<li>注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据</li>
<li><a href="https://segmentfault.com/a/1190000008879966" target="_blank" rel="noopener">vue实例生命周期 参考1</a></li>
<li><a href="https://segmentfault.com/a/1190000008010666" target="_blank" rel="noopener">vue实例生命周期 参考2</a></li>
<li>使用场景：发送请求获取数据</li>
</ul>
<h2 id="钩子函数-beforeMounted"><a href="#钩子函数-beforeMounted" class="headerlink" title="钩子函数 - beforeMounted()"></a>钩子函数 - beforeMounted()</h2><ul>
<li>说明：在挂载开始之前被调用</li>
</ul>
<h2 id="钩子函数-mounted"><a href="#钩子函数-mounted" class="headerlink" title="钩子函数 - mounted()"></a>钩子函数 - <strong>mounted()</strong></h2><ul>
<li>说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作</li>
</ul>
<h2 id="钩子函数-beforeUpdated"><a href="#钩子函数-beforeUpdated" class="headerlink" title="钩子函数 - beforeUpdated()"></a>钩子函数 - beforeUpdated()</h2><ul>
<li>说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。</li>
</ul>
<h2 id="钩子函数-updated"><a href="#钩子函数-updated" class="headerlink" title="钩子函数 - updated()"></a>钩子函数 - updated()</h2><ul>
<li>说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。</li>
</ul>
<h2 id="钩子函数-beforeDestroy"><a href="#钩子函数-beforeDestroy" class="headerlink" title="钩子函数 - beforeDestroy()"></a>钩子函数 - beforeDestroy()</h2><ul>
<li>说明：实例销毁之前调用。在这一步，实例仍然完全可用。</li>
<li>使用场景：实例销毁之前，执行清理任务，比如：清除定时器等</li>
</ul>
<h2 id="钩子函数-destroyed"><a href="#钩子函数-destroyed" class="headerlink" title="钩子函数 - destroyed()"></a>钩子函数 - destroyed()</h2><ul>
<li>说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。</li>
</ul>
<h1 id="axios"><a href="#axios" class="headerlink" title="axios"></a>axios</h1><blockquote>
<p>Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。</p>
<p>vue1.x的时候vue提供了一个包，vue-resource 专门用于发送ajax请求，但是vue2.x的时候，vue的作者的自己发了一个文章，推荐大家都使用axios库来发送ajax请求。</p>
</blockquote>
<p>vue自身没有提供发送ajax请求的工具</p>
<p>Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 </p>
<ul>
<li>Promise based HTTP client for the browser and node.js<ul>
<li>以Promise为基础的HTTP客户端，适用于：浏览器和node.js</li>
<li>封装ajax，用来发送请求，异步获取数据</li>
</ul>
</li>
<li>安装：<code>npm i -S axios</code></li>
<li><a href>axios github</a></li>
</ul>
<h1 id="响应式数据的说明"><a href="#响应式数据的说明" class="headerlink" title="响应式数据的说明"></a>响应式数据的说明</h1><blockquote>
<p>响应式数据: 把data中的数据挂到vm身上，vm身上的这个数据其实就是响应式的</p>
<p>一旦数据发生了改变，页面中的内容也会跟着改变</p>
</blockquote>
<h2 id="动态添加的数据不是响应式的以及-set的使用"><a href="#动态添加的数据不是响应式的以及-set的使用" class="headerlink" title="动态添加的数据不是响应式的以及$set的使用"></a>动态添加的数据不是响应式的以及$set的使用</h2><ul>
<li>data中的数据一定要先声明，再使用，动态给对象添加的属性不是响应式的</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">"app"</span>&gt;</span><br><span class="line">    &lt;p&gt;&#123;&#123;person.name&#125;&#125;---&#123;&#123;person.age&#125;&#125;---&#123;&#123;person.gender&#125;&#125;&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br><span class="line"></span><br><span class="line">&lt;script src=<span class="string">"vue.js"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;script&gt;</span></span><br><span class="line"><span class="regexp">    var vm = new Vue(&#123;</span></span><br><span class="line"><span class="regexp">        el: '#app',</span></span><br><span class="line"><span class="regexp">        data: &#123;</span></span><br><span class="line"><span class="regexp">            person: &#123;</span></span><br><span class="line"><span class="regexp">                name: 'zs',</span></span><br><span class="line"><span class="regexp">                age: 18</span></span><br><span class="line"><span class="regexp">            &#125;</span></span><br><span class="line"><span class="regexp">        &#125;</span></span><br><span class="line"><span class="regexp">    &#125;)</span></span><br><span class="line"><span class="regexp">&lt;/</span>script&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 动态给data中添加的数据是无效的</span></span><br><span class="line"><span class="comment">// 在vue实例创建的时候，会把data中的数据绑定到vm上，所以data中的数据是响应的</span></span><br><span class="line"><span class="comment">// 但是动态绑定的数据不是响应是的。</span></span><br><span class="line">vm.person.gender = <span class="string">'男'</span></span><br></pre></td></tr></table></figure>

<ul>
<li>如果想要动态绑定数据，并且是响应式的,需要使用<code>vm.$set方法</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.$<span class="keyword">set</span>(this.person, 'gender', '男')</span><br></pre></td></tr></table></figure>

<p>结论：</p>
<ul>
<li>如果是对象，动态给对象添加或者删除一个属性，vue是检测不到的，所以不是响应的，如果想用动态添加的数据是响应式，需要使用<code>Vue.set(obj, key, value)</code> <code>vm.$set(obj, key ,value)</code></li>
<li>如果是数组，通过数组的下标或者是数组的长度，vue也是检测不到，所以操作也不是响应式的<ul>
<li>使用<code>Vue.set</code>方法</li>
<li>数组的变异的方法，这个方法会改变原数组，能够触发vue的更新。</li>
</ul>
</li>
</ul>
<h2 id="异步DOM更新以及-nextTick的说明"><a href="#异步DOM更新以及-nextTick的说明" class="headerlink" title="异步DOM更新以及$nextTick的说明"></a>异步DOM更新以及$nextTick的说明</h2><p>在vue中数据发生了改变，DOM中的数据也会跟着发生改变，但是这个过程是异步的</p>
<p>vue的数据发生改变之后，DOM不会立即更新，会等到下一次渲染工作执行的时候才会更新DOM</p>
<p>目的：为了提高渲染的性能</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">clickFn () &#123;</span><br><span class="line">    <span class="comment">// 数据变化了， view中的内容也要跟着变</span></span><br><span class="line">    <span class="keyword">this</span>.msg = <span class="string">'你好啊，vue1'</span></span><br><span class="line">    <span class="keyword">this</span>.msg = <span class="string">'你好啊，vue2'</span></span><br><span class="line">    <span class="keyword">this</span>.msg = <span class="string">'你好啊，vue3'</span></span><br><span class="line">    <span class="keyword">this</span>.msg = <span class="string">'你好啊，vue4'</span></span><br><span class="line">    <span class="keyword">this</span>.msg = <span class="string">'你好啊，vue5'</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// 为什么：DOM操作是非常消耗性能的，简单DOM的操作能够提升我们的性能，如果每次操作数据，都立即更新DOM，无疑性能会非常的低，所以vue中会等待数据都修改完成</span></span><br><span class="line">    <span class="keyword">let</span> result = <span class="built_in">document</span>.querySelector(<span class="string">'p'</span>).innerHTML</span><br><span class="line">    <span class="built_in">console</span>.log(result)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>$nextTick</code>方法会在DOM更新之后执行</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">// 在实际开发中，有可能需要在数据改变之后，获取到更新之后的DOM数据</span></span><br><span class="line"><span class="comment">// 这个时候可以使用 $nextTick函数</span></span><br><span class="line"><span class="comment">// 当vue更新完DOM后，会自动调用$nextTick函数，确保在这个函数中可以获取到DOM结构是最新的</span></span><br><span class="line"><span class="keyword">this</span>.$nextTick(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> result = <span class="built_in">document</span>.querySelector(<span class="string">'p'</span>).innerHTML</span><br><span class="line">    <span class="built_in">console</span>.log(result)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">await</span> <span class="keyword">this</span>.$nextTick()</span><br></pre></td></tr></table></figure>



<h1 id="组件化开发"><a href="#组件化开发" class="headerlink" title="组件化开发"></a>组件化开发</h1><h2 id="组件的概念"><a href="#组件的概念" class="headerlink" title="组件的概念"></a>组件的概念</h2><blockquote>
<p>组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。 </p>
<p>在vue中都是组件化开发的，组件化开发就是把一个完整的页面分割成一个一个的小组件。</p>
</blockquote>
<p>组件的优点：</p>
<ul>
<li>容易维护</li>
<li>复用</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">vue组件分为全局组件和局部组件</span><br><span class="line">全局组件：在所有的vue实例中都能使用</span><br><span class="line">局部组件：只有在当前vue实例中能够使用</span><br></pre></td></tr></table></figure>

<h2 id="全局组件"><a href="#全局组件" class="headerlink" title="全局组件"></a>全局组件</h2><ul>
<li>定义</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//要注册一个全局组件，可以使用 Vue.component(tagName, options)。</span></span><br><span class="line"><span class="comment">//注册一个全局的组件</span></span><br><span class="line"><span class="comment">// Vue.component(tagName, options)</span></span><br><span class="line">Vue.component(<span class="string">"hello"</span>, &#123;</span><br><span class="line">    template: <span class="string">'&lt;h3&gt;我是全局组件！&lt;/h3&gt;'</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<ul>
<li>使用</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">全局组件可以在所有的实例中使用</span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hello</span>&gt;</span><span class="tag">&lt;/<span class="name">hello</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>注意点：组件的模板有且仅有一个根元素</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>我是全局组件！<span class="tag">&lt;/<span class="name">h3</span>&gt;</span><span class="tag">&lt;<span class="name">p</span>&gt;</span>有两个根元素<span class="tag">&lt;/<span class="name">p</span>&gt;</span>';  //错误的用法</span><br><span class="line">template: '<span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">h3</span>&gt;</span>我是全局组件！<span class="tag">&lt;/<span class="name">h3</span>&gt;</span><span class="tag">&lt;<span class="name">p</span>&gt;</span>有两个根元素<span class="tag">&lt;/<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span>';</span><br></pre></td></tr></table></figure>

<ul>
<li>如果有很多的内容，template可以使用字符串模版</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">"my-button"</span>, &#123;</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">        &lt;div&gt;</span></span><br><span class="line"><span class="string">        &lt;h1&gt;我是一个标题&lt;/h1&gt;</span></span><br><span class="line"><span class="string">        &lt;p&gt;我是一个段落&lt;/p&gt;</span></span><br><span class="line"><span class="string">        &lt;/div&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h2 id="局部组件"><a href="#局部组件" class="headerlink" title="局部组件"></a>局部组件</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在vue实例的内部，通过components属性来定义局部组件</span></span><br><span class="line">components: &#123;</span><br><span class="line">    <span class="string">"my-button"</span>: &#123;</span><br><span class="line">        template: <span class="string">`</span></span><br><span class="line"><span class="string">        &lt;div&gt;</span></span><br><span class="line"><span class="string">        &lt;h1&gt;我是一个标题&lt;/h1&gt;</span></span><br><span class="line"><span class="string">        &lt;p&gt;我是一个段落&lt;/p&gt;</span></span><br><span class="line"><span class="string">        &lt;/div&gt;</span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="组件是特殊的vue实例"><a href="#组件是特殊的vue实例" class="headerlink" title="组件是特殊的vue实例"></a>组件是特殊的vue实例</h2><blockquote>
<p>可以将组件看成是一个vue的实例，因此，在vue实例中能配置的属性，在组件中依旧能够配置。</p>
<p>比如：data,method,watch,computed,钩子函数等</p>
<p>注意：组件中data属性必须是一个函数，返回值才是data的数据</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//可以把组件看成一个vue实例</span></span><br><span class="line">Vue.component(<span class="string">"my-button"</span>, &#123;</span><br><span class="line">   template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div&gt;</span></span><br><span class="line"><span class="string">    	&lt;h1 @click="add"&gt;我是一个标题&lt;/h1&gt;</span></span><br><span class="line"><span class="string">    	&lt;p&gt;&#123;&#123;msg&#125;&#125;&lt;/p&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">    <span class="comment">//组件可以通过data属性提供组件自己的数据，注意，组件的data参数必须是一个函数，不能是用一个对象。</span></span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">        	msg: <span class="string">'hello vue'</span></span><br><span class="line">    	&#125;;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        add() &#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">"哈哈"</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>



<ul>
<li>组件是一个独立封闭的个体，组件之间的数据是无法相互使用的</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    data: &#123;</span><br><span class="line">        outer: <span class="string">'我是实例的数据'</span></span><br><span class="line">    &#125;,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">//可以把组件看成一个vue实例</span></span><br><span class="line">Vue.component(<span class="string">"my-button"</span>, &#123;</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div&gt;</span></span><br><span class="line"><span class="string">        &lt;p&gt;&#123;&#123;inner&#125;&#125;&lt;/p&gt;  //正确，组件可以使用自己的数据</span></span><br><span class="line"><span class="string">        &lt;p&gt;&#123;&#123;outer&#125;&#125;&lt;/p&gt;  //报错，组件无法使用其他组件的数据</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            inner: <span class="string">'我是组件的数据'</span></span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h2 id="vue-devTool浏览器插件的使用"><a href="#vue-devTool浏览器插件的使用" class="headerlink" title="vue-devTool浏览器插件的使用"></a>vue-devTool浏览器插件的使用</h2><blockquote>
<p>vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。</p>
</blockquote>
<p>默认插件必须在http协议下打开才能看到。</p>
<p>插件详细信息—》允许访问文件网址   ，这样file协议打开也能看到效果了</p>
<h1 id="组件通讯"><a href="#组件通讯" class="headerlink" title="组件通讯"></a>组件通讯</h1><blockquote>
<p>因为组件是一个独立的个体，组件无法使用到外部的数据</p>
<p>但是在真实开发中，多个组件之间是需要相互使用彼此的数据的，因此需要使用组件通讯的技术，让组件之间能够相互传值。</p>
</blockquote>
<p>组件通讯分为三类 </p>
<ul>
<li>父组件传递值给子组件</li>
<li>子组件传递值给父组件</li>
<li>非父子组件之间的传值 </li>
</ul>
<h2 id="组件通讯-父传子"><a href="#组件通讯-父传子" class="headerlink" title="组件通讯-父传子"></a>组件通讯-父传子</h2><ul>
<li>定义两个组件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">"parent"</span>, &#123;</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class="parent"&gt;</span></span><br><span class="line"><span class="string">    &lt;p&gt;这是父组件&lt;/p&gt;</span></span><br><span class="line"><span class="string">    &lt;son&gt;&lt;/son&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">    data () &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            car: <span class="string">'玛莎拉蒂'</span>,</span><br><span class="line">            month: <span class="number">1000000</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">Vue.component(<span class="string">"son"</span>, &#123;</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class="son"&gt;</span></span><br><span class="line"><span class="string">    &lt;p&gt;这是子组件&lt;/p&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">&lt;div id=<span class="string">"app"</span>&gt;</span><br><span class="line">    &lt;parent&gt;&lt;<span class="regexp">/parent&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>组件的通讯</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 在父组件的模版中，给子组件增加一个自定义的属性。</span><br><span class="line">&lt;son :car=<span class="string">"car"</span>&gt;&lt;<span class="regexp">/son&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">2. 子组件通过props属性进行接收</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/接收父组件传递过来的值</span></span><br><span class="line"><span class="regexp">props: ['car']</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">3. 子组件使用父组件传递过来的值</span></span><br><span class="line"><span class="regexp">template: `</span></span><br><span class="line"><span class="regexp">&lt;div class="son"&gt;</span></span><br><span class="line"><span class="regexp">	&lt;p&gt;这是子组件&lt;/</span>p&gt;</span><br><span class="line">	&lt;p&gt;这是父组件传递过来的值----&#123;&#123;car&#125;&#125;&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br><span class="line"><span class="string">`,</span></span><br></pre></td></tr></table></figure>

<ul>
<li>思考，怎么获取父组件的money</li>
</ul>
<p><strong>注意：props负责获取父组件的传递过来的，props中的值是只读的，不允许修改</strong></p>
<h2 id="组件通讯-子到父"><a href="#组件通讯-子到父" class="headerlink" title="组件通讯-子到父"></a>组件通讯-子到父</h2><blockquote>
<p>参考链接：<a href="https://blog.csdn.net/jsxiaoshu/article/details/79058940" target="_blank" rel="noopener">https://blog.csdn.net/jsxiaoshu/article/details/79058940</a></p>
</blockquote>
<p>整体思路</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 父组件给子组件注册一个自定义事件</span><br><span class="line"><span class="number">2.</span> 子组件触发这个自定义事件，触发事件时把数据传递给父组件</span><br></pre></td></tr></table></figure>

<ul>
<li>父组件给子组件注册事件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;son @fn=<span class="string">'getData'</span>&gt;&lt;<span class="regexp">/son&gt;</span></span><br><span class="line"><span class="regexp">methods: &#123;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/1. 父组件中定义了一个方法，用于获取数据</span></span><br><span class="line"><span class="regexp">    getData () &#123;</span></span><br><span class="line"><span class="regexp">        console.log("父组件中提供的方法");</span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>子组件触发自定义事件，并且把要传递的数据作为参数进行传递</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//$emit可以出发当前实例的事件</span></span><br><span class="line"><span class="keyword">this</span>.$emit(<span class="string">'getData'</span>, <span class="keyword">this</span>.car);</span><br></pre></td></tr></table></figure>

<ul>
<li>父组件获取值</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">methods: &#123;</span><br><span class="line">    <span class="comment">//1. 父组件中定义了一个方法，用于获取数据</span></span><br><span class="line">    getData (skill) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">"父组件中提供的方法"</span>, skill);</span><br><span class="line">        <span class="keyword">this</span>.skill = skill;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="案例-todomvc"><a href="#案例-todomvc" class="headerlink" title="案例-todomvc"></a>案例-todomvc</h2><h2 id="组件通讯-非父子"><a href="#组件通讯-非父子" class="headerlink" title="组件通讯-非父子"></a>组件通讯-非父子</h2><blockquote>
<p>非父子组件之间通过一个空的Vue实例来传递数据。</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> bus = <span class="keyword">new</span> Vue();   <span class="comment">//bus:公交车  事件总线</span></span><br></pre></td></tr></table></figure>

<ul>
<li>核心逻辑</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">组件A给组件B传值：</span><br><span class="line"><span class="number">1.</span> 组件A给bus注册一个事件，监听事件的处理程序</span><br><span class="line"><span class="number">2.</span> 组件B触发bus上对应的事件，把 值当成参数来传递</span><br><span class="line"><span class="number">3.</span> 组件A通过事件处理程序获取数据</span><br></pre></td></tr></table></figure>



<ul>
<li>组件A给bus注册事件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">//rose在组件创建的时候，给bus注册了一个事件</span></span><br><span class="line">created () &#123;</span><br><span class="line">    bus.$on(<span class="string">"get"</span>, (msg)=&gt;&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">"这是rose注册的事件"</span>, msg);</span><br><span class="line">        <span class="keyword">this</span>.msg = msg;</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>组件B触发bus的事件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;button @click=<span class="string">"send"</span>&gt;表白&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">methods: &#123;</span></span><br><span class="line"><span class="regexp">    send() &#123;</span></span><br><span class="line"><span class="regexp">        bus.$emit("get", this.msg);</span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>组件A通过事件处理程序可以获取到传递的值</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">bus.$on(<span class="string">"get"</span>, (msg)=&gt;&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"这是rose注册的事件"</span>, msg);</span><br><span class="line">    <span class="keyword">this</span>.msg = msg;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p><strong>注意点：1. 必须是同一辆公交车  2. 注册的事件和触发的事件必须保持一致</strong></p>
<h2 id="案例：开关灯案例"><a href="#案例：开关灯案例" class="headerlink" title="案例：开关灯案例"></a>案例：开关灯案例</h2><h2 id="bus是一种通用的组件通讯方案"><a href="#bus是一种通用的组件通讯方案" class="headerlink" title="bus是一种通用的组件通讯方案"></a>bus是一种通用的组件通讯方案</h2><p>我们有三种组件通讯的方案</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 父传子</span><br><span class="line"><span class="number">2.</span> 子传父</span><br><span class="line"><span class="number">3.</span> 非父子（bus）</span><br><span class="line"></span><br><span class="line">其实bus方案也适用于父传子和子传父的方案</span><br></pre></td></tr></table></figure>

<h1 id="slot插槽"><a href="#slot插槽" class="headerlink" title="slot插槽"></a>slot插槽</h1><blockquote>
<p>当组件中某一项需要单独定义，那么就应该使用solt </p>
</blockquote>
<h2 id="单个slot"><a href="#单个slot" class="headerlink" title="单个slot"></a>单个slot</h2><blockquote>
<p>除非子组件模板包含至少一个 <code>&lt;slot&gt;</code> 插口，否则父组件的内容将会被丢弃 ,当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。 </p>
</blockquote>
<p>在组件的模版中定义<code>slot</code>插槽</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">"modal"</span>, &#123;</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class="modal"&gt;</span></span><br><span class="line"><span class="string">    	&lt;p&gt;温馨提示&lt;/p&gt;</span></span><br><span class="line"><span class="string">    	&lt;div&gt;</span></span><br><span class="line"><span class="string">    		&lt;slot&gt;&lt;/slot&gt;</span></span><br><span class="line"><span class="string">    	&lt;/div&gt;</span></span><br><span class="line"><span class="string">    	&lt;button&gt;关闭&lt;/button&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">`</span>,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>父组件传值</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;modal&gt;你确定要退出系统吗？&lt;<span class="regexp">/modal&gt;</span></span><br><span class="line"><span class="regexp">&lt;modal&gt;你确定要删除这个内容吗？&lt;/m</span>odal&gt;</span><br></pre></td></tr></table></figure>

<h2 id="具名插槽"><a href="#具名插槽" class="headerlink" title="具名插槽"></a>具名插槽</h2><blockquote>
<p>如果一个组件中想使用多个slot那么此时就应该使用具名slot。 </p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">"modal"</span>, &#123;</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class="modal"&gt;</span></span><br><span class="line"><span class="string">    &lt;slot name="header"&gt;&lt;/slot&gt;</span></span><br><span class="line"><span class="string">    &lt;slot name="content"&gt;&lt;/slot&gt;</span></span><br><span class="line"><span class="string">    &lt;slot name="footer"&gt;&lt;/slot&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">	`</span>,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">modal</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">slot</span>=<span class="string">"header"</span>&gt;</span>温馨提示<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">slot</span>=<span class="string">"content"</span>&gt;</span>你要删除内容吗<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">slot</span>=<span class="string">"footer"</span>&gt;</span>关闭<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">modal</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">modal</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">slot</span>=<span class="string">"header"</span>&gt;</span>提示<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">slot</span>=<span class="string">"content"</span>&gt;</span>你要删除这条记录吗<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">slot</span>=<span class="string">"footer"</span>&gt;</span>开启<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">modal</span>&gt;</span></span><br></pre></td></tr></table></figure>


<h1 id="vue动画"><a href="#vue动画" class="headerlink" title="vue动画"></a>vue动画</h1><blockquote>
<p>Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。</p>
<p>Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。</p>
</blockquote>
<h2 id="基本使用-2"><a href="#基本使用-2" class="headerlink" title="基本使用"></a>基本使用</h2><p>Vue 提供了 <code>transition</code> 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡</p>
<ul>
<li>条件渲染 (使用 <code>v-if</code>)</li>
<li>条件展示 (使用 <code>v-show</code>)</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"demo"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"show = !show"</span>&gt;</span></span><br><span class="line">    Toggle</span><br><span class="line">  <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">transition</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-show</span>=<span class="string">"show"</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>



<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">'#demo'</span>,</span><br><span class="line">  data: &#123;</span><br><span class="line">    show: <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>样式处理</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.v-enter-active</span>,</span><br><span class="line"><span class="selector-class">.v-leave-active</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>: opacity <span class="number">0.5s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.v-enter</span>,</span><br><span class="line"><span class="selector-class">.v-leave-to</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.v-leave</span>,</span><br><span class="line"><span class="selector-class">.v-enter-to</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="指定name"><a href="#指定name" class="headerlink" title="指定name"></a>指定name</h2><blockquote>
<p>如果有多个动画，可以指定name属性</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">transition</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-show</span>=<span class="string">"show"</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>样式</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.fade-enter-active</span>,</span><br><span class="line"><span class="selector-class">.fade-leave-active</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>: opacity <span class="number">0.5s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.fade-enter</span>,</span><br><span class="line"><span class="selector-class">.fade-leave-to</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.fade-leave</span>,</span><br><span class="line"><span class="selector-class">.fade-enter-to</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="结合动画使用"><a href="#结合动画使用" class="headerlink" title="结合动画使用"></a>结合动画使用</h2><p>结构</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"show = !show"</span>&gt;</span>切换<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">transition</span> <span class="attr">name</span>=<span class="string">"fade"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-show</span>=<span class="string">"show"</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>样式</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.fade-enter-active</span> &#123;</span><br><span class="line">  <span class="attribute">animation</span>: bounce-in <span class="number">0.5s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.fade-leave-active</span> &#123;</span><br><span class="line">  <span class="attribute">animation</span>: bounce-in <span class="number">0.5s</span> reverse;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> bounce-in &#123;</span><br><span class="line">  0% &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">0</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  50% &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.5</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  100% &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="自定义过渡的类名"><a href="#自定义过渡的类名" class="headerlink" title="自定义过渡的类名"></a>自定义过渡的类名</h2><p>我们可以通过以下特性来自定义过渡类名：</p>
<ul>
<li><code>enter-class</code></li>
<li><code>enter-active-class</code></li>
<li><code>enter-to-class</code></li>
<li><code>leave-class</code></li>
<li><code>leave-active-class</code></li>
<li><code>leave-to-class</code> </li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">transition</span> <span class="attr">name</span>=<span class="string">"fade"</span> <span class="attr">enter-active-class</span>=<span class="string">"in"</span> <span class="attr">leave-active-class</span>=<span class="string">"out"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-show</span>=<span class="string">"show"</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br></pre></td></tr></table></figure>



<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.in</span> &#123;</span><br><span class="line">  <span class="attribute">animation</span>: bounce-in <span class="number">0.5s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.out</span> &#123;</span><br><span class="line">  <span class="attribute">animation</span>: bounce-in <span class="number">0.5s</span> reverse;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> bounce-in &#123;</span><br><span class="line">  0% &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">0</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  50% &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.5</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  100% &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="配合animate-css使用"><a href="#配合animate-css使用" class="headerlink" title="配合animate.css使用"></a>配合animate.css使用</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"https://cdn.jsdelivr.net/npm/animate.css@3.5.1"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"example-3"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"show = !show"</span>&gt;</span></span><br><span class="line">    Toggle render</span><br><span class="line">  <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">transition</span></span></span><br><span class="line"><span class="tag">    <span class="attr">name</span>=<span class="string">"custom-classes-transition"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">enter-active-class</span>=<span class="string">"animated tada"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">leave-active-class</span>=<span class="string">"animated bounceOutRight"</span></span></span><br><span class="line"><span class="tag">  &gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">"show"</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="自定义指令"><a href="#自定义指令" class="headerlink" title="自定义指令"></a>自定义指令</h1><blockquote>
<p>有的情况下，你仍然需要对<strong>普通 DOM 元素进行底层操作</strong>，这时候就会用到自定义指令。</p>
<p>比如：获取文本框的焦点 </p>
</blockquote>
<h2 id="自定义指令-1"><a href="#自定义指令-1" class="headerlink" title="自定义指令"></a>自定义指令</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">- 自定义一个指令</span><br><span class="line">- 使用一个自定义指令</span><br></pre></td></tr></table></figure>

<p>定义一个全局的指令</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 注册一个全局自定义指令 `v-focus`</span></span><br><span class="line"><span class="comment">// 参数1：指令的名称</span></span><br><span class="line"><span class="comment">// 参数2：指令的配置项（钩子函数）</span></span><br><span class="line">Vue.directive(<span class="string">'focus'</span>, &#123;</span><br><span class="line">  <span class="comment">// 当被绑定的元素插入到 DOM 中时……</span></span><br><span class="line">  <span class="comment">// el: 当前绑定的元素</span></span><br><span class="line">  inserted: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 聚焦元素</span></span><br><span class="line">    el.focus()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>使用自定义指令</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">v-focus</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="全局指令与局部指令"><a href="#全局指令与局部指令" class="headerlink" title="全局指令与局部指令"></a>全局指令与局部指令</h2><p>定义全局指令</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 注册一个全局自定义指令 `v-focus`</span></span><br><span class="line"><span class="comment">// 参数1：指令的名称</span></span><br><span class="line"><span class="comment">// 参数2：指令的配置项（钩子函数）</span></span><br><span class="line">Vue.directive(<span class="string">'focus'</span>, &#123;</span><br><span class="line">  <span class="comment">// 当被绑定的元素插入到 DOM 中时……</span></span><br><span class="line">  <span class="comment">// el: 当前绑定的元素</span></span><br><span class="line">  inserted: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 聚焦元素</span></span><br><span class="line">    el.focus()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>定义局部指令</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">directives: &#123;</span><br><span class="line">  focus: &#123;</span><br><span class="line">    <span class="comment">// 指令的定义</span></span><br><span class="line">    inserted: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</span><br><span class="line">      el.focus()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="指令的钩子函数"><a href="#指令的钩子函数" class="headerlink" title="指令的钩子函数"></a>指令的钩子函数</h2><ul>
<li><code>bind</code>:  只会调用一次，当指令绑定到当前元素上时调用</li>
<li><code>inserted</code>: 被绑定元素插入父节点时调用</li>
<li><code>update</code>: 指令的值发生改变的时候</li>
<li><code>componentUpdated</code>: 指令所在的组件中所有的DOM都更新完成的时候</li>
<li><code>unbind</code>：只调用一次，指令与元素解绑时调用。</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">Vue.directive(<span class="string">'focus'</span>, &#123;</span><br><span class="line">    <span class="comment">// 只会调用一次，当指令绑定到当前元素上时调用</span></span><br><span class="line">    bind (el) &#123;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 当前元素被插入到父节点的时候调用(渲染时)</span></span><br><span class="line">    inserted (el) &#123;</span><br><span class="line">        el.focus()</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 当指令对应的数据发生改变的时候</span></span><br><span class="line">    update () &#123;</span><br><span class="line"></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 所有的DOM都更新之后</span></span><br><span class="line">    componentUpdated () &#123;</span><br><span class="line"></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 指令与元素解绑的时候</span></span><br><span class="line">    unbind () &#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h2 id="钩子函数的参数"><a href="#钩子函数的参数" class="headerlink" title="钩子函数的参数"></a>钩子函数的参数</h2><p>所有的钩子函数两个参数<code>el</code>和<code>binding</code></p>
<p>指令的组成</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">v-指令名:指令参数.指令修饰符.指令修饰符 = <span class="string">"指令的值"</span></span><br><span class="line">v-on:click.enter.prevent = <span class="string">"clickFn"</span></span><br></pre></td></tr></table></figure>

<p>指令的参数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">el: 当前元素</span><br><span class="line">binding：一个对象，包含以下属性：</span><br><span class="line">    name：指令名，不包括 v- 前缀。</span><br><span class="line">    value：指令的绑定值，例如：v-my-directive=<span class="string">"1 + 1"</span> 中，绑定值为 <span class="number">2</span>。</span><br><span class="line">    oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。</span><br><span class="line">    expression：字符串形式的指令表达式。例如 v-my-directive=<span class="string">"1 + 1"</span> 中，表达式为 <span class="string">"1 + 1"</span>。</span><br><span class="line">    arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 <span class="string">"foo"</span>。</span><br><span class="line">    modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 &#123; <span class="attr">foo</span>: <span class="literal">true</span>, <span class="attr">bar</span>: <span class="literal">true</span> &#125;。</span><br></pre></td></tr></table></figure>

<h2 id="指令的简写"><a href="#指令的简写" class="headerlink" title="指令的简写"></a>指令的简写</h2><p>在很多时候，你可能想在 <code>bind</code> 和 <code>update</code> 时触发相同行为，而不关心其它的钩子。比如这样写:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">Vue.directive(<span class="string">'color-swatch'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">el, binding</span>) </span>&#123;</span><br><span class="line">  el.style.backgroundColor = binding.value</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>







    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/blog/tags/vue/" rel="tag"># vue</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/blog/2018/08/22/vue/vue-router/" rel="prev" title="vue 基础">
      <i class="fa fa-chevron-left"></i> vue 基础
    </a></div>
      <div class="post-nav-item">
    <a href="/blog/2018/09/05/nodejs/05-express-session/" rel="next" title="cookie和session">
      cookie和session <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Vue基本概念"><span class="nav-text">Vue基本概念</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#vue介绍"><span class="nav-text">vue介绍</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#渐进式的概念"><span class="nav-text">渐进式的概念</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#框架的概念"><span class="nav-text">框架的概念</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#MVVM的概念"><span class="nav-text">MVVM的概念</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Vue中的MVVM"><span class="nav-text">Vue中的MVVM</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#vue初体验"><span class="nav-text">vue初体验</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#基本使用步骤"><span class="nav-text">基本使用步骤</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#插值表达式"><span class="nav-text">插值表达式</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#vue指令"><span class="nav-text">vue指令</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#v-bind指令"><span class="nav-text">v-bind指令</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-model指令"><span class="nav-text">v-model指令</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#双向数据绑定原理"><span class="nav-text">双向数据绑定原理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Vue双向绑定的极简实现"><span class="nav-text">Vue双向绑定的极简实现</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-on指令"><span class="nav-text">v-on指令</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#事件修饰符"><span class="nav-text">事件修饰符</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#按键修饰符"><span class="nav-text">按键修饰符</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-for"><span class="nav-text">v-for</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#key属性"><span class="nav-text">key属性</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-if-和-v-show"><span class="nav-text">v-if 和 v-show</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-else与v-else-if指令"><span class="nav-text">v-else与v-else-if指令</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-text指令"><span class="nav-text">v-text指令</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#v-html指令"><span class="nav-text">v-html指令</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#提升性能：v-pre"><span class="nav-text">提升性能：v-pre</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#提升性能：v-once"><span class="nav-text">提升性能：v-once</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#样式处理-class和style"><span class="nav-text">样式处理-class和style</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#计算属性"><span class="nav-text">计算属性</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#基本使用"><span class="nav-text">基本使用</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#watch监视数据的变化"><span class="nav-text">watch监视数据的变化</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#基本使用-1"><span class="nav-text">基本使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#监视对象"><span class="nav-text">监视对象</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#生命周期与钩子函数"><span class="nav-text">生命周期与钩子函数</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#生命周期介绍"><span class="nav-text">生命周期介绍</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#钩子函数-beforeCreate"><span class="nav-text">钩子函数 - beforeCreate()</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#钩子函数-created"><span class="nav-text">钩子函数 - created()</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#钩子函数-beforeMounted"><span class="nav-text">钩子函数 - beforeMounted()</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#钩子函数-mounted"><span class="nav-text">钩子函数 - mounted()</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#钩子函数-beforeUpdated"><span class="nav-text">钩子函数 - beforeUpdated()</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#钩子函数-updated"><span class="nav-text">钩子函数 - updated()</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#钩子函数-beforeDestroy"><span class="nav-text">钩子函数 - beforeDestroy()</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#钩子函数-destroyed"><span class="nav-text">钩子函数 - destroyed()</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#axios"><span class="nav-text">axios</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#响应式数据的说明"><span class="nav-text">响应式数据的说明</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#动态添加的数据不是响应式的以及-set的使用"><span class="nav-text">动态添加的数据不是响应式的以及$set的使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#异步DOM更新以及-nextTick的说明"><span class="nav-text">异步DOM更新以及$nextTick的说明</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#组件化开发"><span class="nav-text">组件化开发</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#组件的概念"><span class="nav-text">组件的概念</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#全局组件"><span class="nav-text">全局组件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#局部组件"><span class="nav-text">局部组件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#组件是特殊的vue实例"><span class="nav-text">组件是特殊的vue实例</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue-devTool浏览器插件的使用"><span class="nav-text">vue-devTool浏览器插件的使用</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#组件通讯"><span class="nav-text">组件通讯</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#组件通讯-父传子"><span class="nav-text">组件通讯-父传子</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#组件通讯-子到父"><span class="nav-text">组件通讯-子到父</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#案例-todomvc"><span class="nav-text">案例-todomvc</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#组件通讯-非父子"><span class="nav-text">组件通讯-非父子</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#案例：开关灯案例"><span class="nav-text">案例：开关灯案例</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#bus是一种通用的组件通讯方案"><span class="nav-text">bus是一种通用的组件通讯方案</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#slot插槽"><span class="nav-text">slot插槽</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#单个slot"><span class="nav-text">单个slot</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#具名插槽"><span class="nav-text">具名插槽</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#vue动画"><span class="nav-text">vue动画</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#基本使用-2"><span class="nav-text">基本使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#指定name"><span class="nav-text">指定name</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#结合动画使用"><span class="nav-text">结合动画使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#自定义过渡的类名"><span class="nav-text">自定义过渡的类名</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#配合animate-css使用"><span class="nav-text">配合animate.css使用</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#自定义指令"><span class="nav-text">自定义指令</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#自定义指令-1"><span class="nav-text">自定义指令</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#全局指令与局部指令"><span class="nav-text">全局指令与局部指令</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#指令的钩子函数"><span class="nav-text">指令的钩子函数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#钩子函数的参数"><span class="nav-text">钩子函数的参数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#指令的简写"><span class="nav-text">指令的简写</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="大春哥"
      src="/blog/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">大春哥</p>
  <div class="site-description" itemprop="description">IT</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/blog/archives/">
        
          <span class="site-state-item-count">35</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/blog/categories/">
          
        <span class="site-state-item-count">11</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/blog/tags/">
          
        <span class="site-state-item-count">17</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">大春哥</span>
</div>

        








      </div>
    </footer>
  </div>

  
  <script src="/blog/lib/anime.min.js"></script>
  <script src="/blog/lib/velocity/velocity.min.js"></script>
  <script src="/blog/lib/velocity/velocity.ui.min.js"></script>

<script src="/blog/js/utils.js"></script>

<script src="/blog/js/motion.js"></script>


<script src="/blog/js/schemes/pisces.js"></script>


<script src="/blog/js/next-boot.js"></script>




  




  
<script src="/blog/js/local-search.js"></script>













  

  

</body>
</html>
